<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:replace="fragments/layout :: layout(~{::title}, ~{::section})">

<head>
    <title>登录 - 图书馆管理系统</title>
</head>

<body>
    <section>
        <style>
            .login-page {
                min-height: 100vh;
                background-image: url('/img/bg.jpg');
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
                padding: 60px 0;
                position: relative;
            }

            .login-page::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: rgba(0, 0, 0, 0.5);
                z-index: 0;
            }

            .login-container {
                position: relative;
                z-index: 1;
            }

            .login-card {
                background-color: rgba(255, 255, 255, 0.9);
                border-radius: 10px;
                box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
            }

            .login-header {
                background-color: #2c3e50;
                color: white;
                border-radius: 10px 10px 0 0;
                padding: 20px;
                text-align: center;
            }

            .login-body {
                padding: 30px;
            }

            .login-footer {
                background-color: #f8f9fa;
                border-radius: 0 0 10px 10px;
                padding: 20px;
            }

            .btn-login {
                background-color: #2c3e50;
                border-color: #2c3e50;
                padding: 10px;
                font-weight: bold;
                letter-spacing: 1px;
                transition: all 0.3s;
            }

            .btn-login:hover {
                background-color: #1a252f;
                border-color: #1a252f;
                transform: translateY(-2px);
            }

            .form-control {
                border-radius: 5px;
                padding: 10px;
                height: auto;
            }

            .login-tip {
                background-color: rgba(23, 162, 184, 0.2);
                border: none;
                border-left: 4px solid #17a2b8;
            }
        </style>

        <div class="login-page">
            <div class="container login-container">
                <div class="row justify-content-center">
                    <div class="col-md-5">
                        <div class="card login-card">
                            <div class="login-header">
                                <h3 class="mb-0">图书馆管理系统</h3>
                                <p class="mt-2 mb-0">请登录您的账号</p>
                            </div>
                            <div class="login-body">
                                <div id="loginForm">
                                    <div class="form-group">
                                        <label for="username"><i class="fas fa-user mr-2"></i>用户名</label>
                                        <input type="text" class="form-control" id="username" name="username"
                                            placeholder="请输入用户名" required>
                                    </div>
                                    <div class="form-group">
                                        <label for="password"><i class="fas fa-lock mr-2"></i>密码</label>
                                        <input type="password" class="form-control" id="password" name="password"
                                            placeholder="请输入密码" required>
                                    </div>
                                    <div class="form-group form-check">
                                        <input type="checkbox" class="form-check-input" id="rememberMe"
                                            name="rememberMe">
                                        <label class="form-check-label" for="rememberMe">记住我</label>
                                    </div>
                                    <button type="button" onclick="login()" class="btn btn-primary btn-block btn-login">
                                        <i class="fas fa-sign-in-alt mr-2"></i>登录
                                    </button>
                                </div>
                            </div>
                            <div class="login-footer text-center">
                                <div class="alert login-tip" role="alert">
                                    <strong>提示：</strong> 默认管理员账号：admin，密码：admin
                                </div>
                                <div class="mt-3">
                                    <p>还没有账号？<a href="/register" class="font-weight-bold">立即注册</a></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script>
            // 页面加载完成后执行
            document.addEventListener('DOMContentLoaded', function () {
                console.log('登录页面已加载');

                // 如果已经登录，直接跳转到首页
                if (localStorage.getItem('isLoggedIn') === 'true') {
                    window.location.href = '/';
                }
            });

            // 登录函数
            function login() {
                console.log('登录按钮被点击');

                // 获取用户名和密码
                var username = document.getElementById('username').value;
                var password = document.getElementById('password').value;
                var rememberMe = document.getElementById('rememberMe').checked;

                console.log('用户名:', username);
                console.log('密码:', password);
                console.log('记住我:', rememberMe);

                // 发送登录请求
                $.ajax({
                    url: '/user/api/login',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({
                        username: username,
                        password: password
                    }),
                    success: function(res) {
                        if (res.code === 200) {
                            console.log('登录验证成功，准备跳转到首页');
                            console.log('从后端获取的用户数据：', res.data);
                            console.log('即将保存的用户ID：', res.data.id);

                            // 保存登录状态到localStorage
                            localStorage.setItem('username', username);
                            localStorage.setItem('isLoggedIn', 'true');
                            localStorage.setItem('userId', res.data.id);

                            // 如果选择了"记住我"，设置过期时间为7天，否则关闭浏览器后失效
                            if (rememberMe) {
                                const expiryDate = new Date();
                                expiryDate.setDate(expiryDate.getDate() + 7);
                                localStorage.setItem('loginExpiry', expiryDate.toISOString());
                            }

                            // 登录成功，跳转到首页
                            window.location.href = '/';
                        } else {
                            console.log('登录验证失败');
                            // 显示错误信息
                            alert(res.message || '用户名或密码错误！');
                        }
                    },
                    error: function() {
                        alert('服务器错误，请稍后再试！');
                    }
                });
            }

            // 添加回车键提交表单
            document.getElementById('password').addEventListener('keypress', function (e) {
                if (e.key === 'Enter') {
                    login();
                }
            });
        </script>
    </section>
</body>

</html>